<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水印</title>
</head>
<body>
    <div>
        feigehenmang 1
    </div>
    <script>
        function cssHelper(el, prototype) {
        for (let i in prototype) {
            el.style[i] = prototype[i]
        }
        }
        for (let index = 0 ; index < 11; index++) {
            for (let jndex = 0; jndex < 11; jndex++) {
                const item = document.createElement('div')
                item.innerHTML = '笔记'
                cssHelper(item, {
                    position: 'absolute',
                    top: `${index*50}px`,
                    left: `${jndex*50}px`,
                    fontSize: `16px`,
                    color: '#000',
                    lineHeight: 1.5,
                    opacity: 0.1,
                    transform: `rotate(-15deg)`,
                    transformOrigin: '0 0',
                    userSelect: 'none',
                    whiteSpace: 'nowrap',
                    overflow: 'hidden',
                })
                document.body.appendChild(item)
            }
        }
        
    </script>
</body>
</html>